<template>
  <div>
    <el-card>
      <span slot="header"
        >项目文档
        <el-tooltip
          class="item"
          effect="dark"
          content="项目文档总共包含多少个，非必须的请说明理由"
          placement="right"
        >
          <i class="el-icon-info"></i>
        </el-tooltip>
      </span>
      <el-table :data="tableData">
        <el-table-column label="文档名称" min-width="200px">
          <template slot-scope="scope">
            <i class="el-icon-document"></i>
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column label="收集类型" prop="cat"></el-table-column>
        <el-table-column label="格式" prop="type"> </el-table-column>
        <el-table-column label="必须" align="center">
          <template>是</template>
        </el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.status == 3" type="info">已审核</el-tag>
            <el-tag v-else-if="scope.row.status == 2" type="primary"
              >已上传</el-tag
            >
            <el-tag v-else-if="scope.row.status == 1" type="warning"
              >未审核</el-tag
            >
            <el-tag v-else type="info">未上传</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="120px"
        >
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 3" type="text" disabled
              >上传</el-button
            >
            <el-button v-else type="text">上传</el-button>
            <el-button type="text" @click="drawer = !drawer"
              >历史记录</el-button
            >
          </template>
        </el-table-column>
      </el-table></el-card
    >
    <el-drawer title="历史记录" :visible.sync="drawer">
      <div style="padding-top: 28px">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.timestamp"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      tableData: [
        {
          name: "01-XXX项目经理任命书-v8.0",
          type: "docx",
          cat: "源文件上传",
          status: 1,
        },
        {
          name: "02-XXX项目参与人员保密协议-v8.0",
          type: "png/jpeg",
          cat: "扫描文件上传",
          status: 2,
        },
        {
          name: "05-项目实施计划",
          type: "excel",
          cat: "扫描文件上传",
          status: 3,
        },
        {
          name: "05-项目实施计划",
          type: "excel",
          cat: "扫描文件上传",
          status: 3,
        },
        {
          name: "05-项目实施计划",
          type: "excel",
          cat: "扫描文件上传",
          status: 3,
        },
        {
          name: "05-项目实施计划",
          type: "excel",
          cat: "扫描文件上传",
          status: 3,
        },
        {
          name: "05-项目实施计划",
          type: "excel",
          cat: "扫描文件上传",
          status: 3,
        },
        {
          name: "05-项目实施计划",
          type: "excel",
          cat: "扫描文件上传",
          status: 3,
        },
        {
          name: "05-项目实施计划",
          type: "excel",
          cat: "扫描文件上传",
          status: 3,
        },
      ],
      activities: [
        {
          content: "上传文件-01-XXX项目经理任命书-v8.0",
          timestamp: "2018-04-15",
        },
        {
          content: "通过审核",
          timestamp: "2018-04-13",
        },
        {
          content: "下载文件",
          timestamp: "2018-04-11",
        },
      ],
    };
  },
  methods: {
    outStatus(scope) {
      console.log(scope);
      switch (scope.row.status) {
        case 1:
          return "已上传";
        case 2:
          return "未审核";
        case 3:
          return "已审核";
        default:
          return "未上传";
      }
    },
  },
};
</script>

<style scoped lang="scss"></style>
